<template>
    <div>
        <mt-swipe :auto="4000">
            <!-- 在组件中,使用v-for 一定要有key -->
            <!-- 将来谁使用此 轮播图组件,就需要传递lunbotuList -->
            <!-- lunbotuList 应该是父组件向子组件传值来设置的 -->
            <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
                <img :src="item.img" alt="" :class="{'full':isfull}">
            </mt-swipe-item>
        </mt-swipe>
    </div>
    <!-- 分析:为什么商品详情中的轮播图那么丑: -->
    <!-- 1 首页中的图片,它的宽高都是使用了100%  -->
    <!-- 2 在商品详情页面中,轮播图的 图片,如果也使用宽高 100% 的话,页面不好看, -->
    <!-- 3 商品详情页面中的轮播图,期望 高度是100%, 但是宽度为自适应 -->
    <!-- 4 经过分析,得到 问题的原因: 首页中的轮播图 和 详情中的轮播图,分歧点,是宽度到底是100%还是自适应 -->
    <!-- 5 既然 这两个轮播图,其它方面都是没有冲突的,只是宽度有分歧,那么就让调用者手动指定是否为百分百    可以定义一个属性 isfull 来控制-->
</template>
<script>
export default {
    props:["lunbotuList", "isfull"]
}
</script>
<style lang="scss" scoped>
.mint-swipe {
  height: 200px;

  .mint-swipe-item {
    text-align: center;
    // 将来删了这些颜色
    &:nth-child(1) {
      background-color: red;
    }
    &:nth-child(2) {
      background-color: blue;
    }
    &:nth-child(3) {
      background-color: cyan;
    }
    img {
     // width: 100%;
      height: 100%;
    }
  }
}
.full{
  width:100%;
}

</style>
